<template>
  <div>
    <div class="all">
      <div class="img-one">
        <img src="../assets/swipe/zhua.png" alt="">
        <p>上门喂猫</p>
      </div>
      <div class="img-two">
        <img src="../assets/swipe/zhua1.png" alt="">
        <p>上门遛狗</p>
      </div>
    </div>
  </div>
</template>
<style>
.all{
  background-color: #ea9c4b;
  width: 35rem;
  height: 16rem;
  display: flex;
  margin: auto;
  margin-top: 1rem;
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2),
    0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  border: 0.1rem solid lightgray;
  border-radius: 1.5rem;
}
.img-one,.img-two{
  width: 15rem;
  margin: auto;
}

.img-one > img,
.img-two > img{
  display: block;
  width: 20vw;
  margin-left: auto;
  margin-right: auto;
}
.img-one,.img-two p{
  font-size: 2rem;
  text-align:center;
  color: white;
}

</style>